<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.js"></script>
  </head>
  <body>
    <!-- MVVM中的View -->
    <div id="app">
      <!-- | 专业术语叫做管道符 -->
      <!-- <p>时间是：{{ date | formatTime }}</p> -->
      <!-- 额外参数的过滤器 -->
      <p>时间是：{{ date | formatDate('YYYY-MM-DD') }}</p>
    </div>

    <script>
      // 定义全局的过滤器，如果需要再定义多个，那么可以使用 Vue.filter
      /**
       * 参数1：过滤器的名字
       * 参数2：处理过滤业务的函数（必须要接受一个原始值，过滤函数最终要返回一个过滤好之后新的值）
       * */
      Vue.filter('formatTime', value => {
        // const date = new Date(value)
        // console.log('---value---', date.getFullYear())
        // return '2023-05-30 11:31:22'

        /**
         * YYYY：年
         * MM: 月
         * DD：日
         * HH：24小时制
         * mm：分
         * ss：秒
         * */
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
      })

      new Vue({
        el: '#app', // el，vue解析的范围
        data: {
          date: new Date() // 以后后台返回的数据可能不能直接拿来渲染，所有我们首先用过滤器去处理一下
        },
        filters: {
          formatDate(value, formatString) {
            return moment(value).format(formatString)
          }
        }
      })
    </script>
  </body>
</html>
